<template>
	<w-container id="hq_page">
		<w-navbar leftIcon="back-btn2" title="详情" :titleStyle="{'color':'#fff'}" bgColor="#232744">
			<view slot="right" class="font-size-12 font-color-white">切换购买</view>
		</w-navbar>
		<w-swiper class='mlr-13 mt-8'></w-swiper>
		<view class="info_card">
			<view class="name"> 
				<text class="font-color-white font-size-16">藏品名称</text>
				<text class="font-color-minor font-size-12 ml-10 mt-2">比太</text> 
			</view>
			<view class="flex flex-ai-center">
				<text class="font-color-success font-size-16">112.34CNY</text>
				<text class="font-color-success font-size-12 ml-10 mt-2">-0.53%</text>
			</view>
			<view class="num">
				<view>
					<text>流通：</text>
					<text>30000</text>
				</view>
				<view>
					<text>最近5min成交量：</text>
					<text>30000</text>
				</view>
				<view>
					<text>24h最高：</text>
					<text>30000</text>
				</view>
				<view>
					<text>最近1h成交量：</text>
					<text>30000</text>
				</view>
				<view>
					<text>24h最低：</text>
					<text>30000</text>
				</view>
				<view>
					<text>今日成交量：</text>
					<text>30000</text>
				</view>
			</view>
		</view>
		<u-sticky style="top: 0;" bgColor="#232744">
			<w-tabs lineWidth="35" :activeStyle="{'color':'#fff'}" :itemStyle="{'padding':0}" :current="current" :tabList="tabList" @change="changeTab"></w-tabs>
		</u-sticky>
		<view class="footer">
			<view class="btn">
				<view>开启行情提醒</view>
				<view>批量买卖</view>
				<view>
					<w-icon name="sc3" size="24"></w-icon>
					<text>关注</text>
				</view>
			</view>
			<u-safe-bottom></u-safe-bottom>
		</view>
	</w-container>
</template>

<script>
	export default {
		data() {
			return {
				current:0,
				tabList:[
					{ type:1,name:'行情' },
					{ type:2,name:'相关公告' },
					{ type:3,name:'成交记录' },
					{ type:4,name:'换手榜' },
					{ type:5,name:'寄售' }
				],
			};
		},
		onLoad() {
			
		},
		methods:{
			changeTab(e) {
				console.log(e)
				let { index } = e;
				this.current = index;
			}
		}
	}
</script>

<style lang="scss">
	#hq_page{
		background-color: #232744;
		.info_card{ 
			width: 100%;
			@extend .plr-13,.mb-20;
			
			>.name{
				width: 100%;
				height: 80rpx;
				@extend .flex,.flex-ai-center;
			}
			>.num{
				width: 100%;
				@extend .flex,.flex-w,.flex-center-sb,.mt-8;
				>view{
					width: 35%;
					color: #fff;
					@extend .flex-center-sb,.font-size-12,.mb-4;
					>text:first-child{
						@extend .font-color-minor;
					}
					&:nth-child(even){
						width: 55%;
						justify-content: flex-start;
					}
				}
			}
		}
	}
	.footer{
		width: 100%;
		position: fixed;
		left: 0;
		bottom: 0;
		>.btn{
			width: 100%;
			height: 120rpx;
			@extend .flex-center-sb,.plr-16;
			&>view{
				&:nth-child(1),&:nth-child(2) {
					width: 288rpx;
					height: 76rpx;
					border-radius: 50rpx;
					color: #fff;
					line-height: 76rpx;
					text-align: center;
				}
				&:nth-child(1){
					background-color: #E78DD2;
				}
				&:nth-child(2){
					background-color: #EAAB4B;
				}
				&:nth-child(3){
					width: 48rpx;
					>text{ display: block;width: 100%;font-size: 20rpx;color: #fff;text-align: center; }
				}
			}
		}
	}
</style>
